<template>
  <div>
    <input type="text" v-model="keyWord" />
    <h1>{{ keyWord }}</h1>
  </div>
</template>

<script>
import { customRef } from "vue";

export default {
  name: "App",
  setup() {
    function myRef(value, delay) {
      let timer = null;

      return customRef((track, trigger) => {
        return {
          get() {
            track(); //告诉Vue这个value值是需要被“追踪”的
            return value;
          },
          set(newValue) {
            clearTimeout(timer);
            timer = setTimeout(() => {
              value = newValue;
              trigger(); //告诉Vue去更新界面
            }, delay);
          },
        };
      });
    }

    let keyWord = myRef("hello", 1000);

    return {
      keyWord,
    };
  },
};
</script>

<style>
</style>
